<template>
  <div>
    <div id="user_message_title">&nbsp;&nbsp;
      <span>患者信息</span>
    </div>
    <div id="user_message_div">
      <div id="user_message_div_1">
        <div class="user_message_div_1">患者姓名：{{this.userMessage.name}}</div>
        <div class="user_message_div_1">性别：{{this.userMessage.gender}}</div>
        <div class="user_message_div_1">年龄：{{this.userMessage.age}}</div>
        <div class="user_message_div_1">手机号：{{this.userMessage.telephone}}</div>
      </div>
      <div id="user_message_div_2">
        <div class="user_message_div_2">所患疾病：{{this.userMessage.illness}}</div>
        <div class="user_message_div_2">肝功能：{{this.userMessage.liverfunc}}</div>
        <div class="user_message_div_2">肾功能：{{this.userMessage.renalfunc}}</div>
        <div class="user_message_div_2">过敏史：{{this.userMessage.allergy}}</div>
        <div class="user_message_div_2">生育计划或状态：{{this.userMessage.birthplan}}</div>
      </div>
      <div id="user_message_div_3">
        病情描述：{{this.userMessage.illnessdescrip}}
      </div>
      <div id="user_message_div_4">已选药品及用药情况：
        <el-button type="warning"
                   id="look">查看原始处方</el-button>
      </div>
      <div id="user_message_medical">
        <div id="user_message_div_5"
             v-for="i in 3"
             v-bind:key="i">
          <div id="picture"></div>
          <div class="user_message_div_5">
            <div id="rx">&nbsp;Rx</div>
            <div id="rx_name">苯磺酸氨氯地平片（络活喜）&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x 1</div>

          </div>
          <div class="user_message_div_5">规格：5mg*7片/盒</div>
          <div class="user_message_div_5"
               style="color: red">￥25</div>
          <div id="user_message_div_6">用药情况： 正在服用；口服，每天一次，每次1片，用药21天</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PrescriptionUserMessage",
  props: {
    prescription: ''
  },
  data () {
    return {
      medicines: [],
      userMessage: ''
    }
  },
  created () {
    this.$axios({
      method: "get",
      url: "/prescription/findUserMessageByMid",
      params: {
        mid: this.prescription.mid
      }
    }).then((res) => {
      this.userMessage = res.data.data;
    });
  }
}
</script>

<style scoped>
#user_message_title {
  margin-right: 200px;
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#user_message_div {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  overflow: hidden;
}
#user_message_div_1 {
  float: left;
  width: 1100px;
  height: 50px;
}
.user_message_div_1 {
  /* border: 1px solid rgb(216, 216, 216); */
  float: left;
  width: 170px;
  margin-left: 20px;
  margin-top: 30px;
}
.user_message_div_2 {
  float: left;
  width: 170px;
  margin-left: 20px;
  margin-top: 30px;
}

#user_message_div_2 {
  float: left;
  width: 1100px;
  height: 50px;
}
#user_message_div_3,
#user_message_div_4 {
  float: left;
  width: 90%;
  margin-top: 30px;
  margin-left: 20px;
}
#look {
  float: right;
  margin-right: 10px;
}
#user_message_medical {
  float: left;
}
#user_message_div_5 {
  float: left;
  width: 500px;
  overflow: hidden;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}
#picture {
  border: 1px solid rgb(216, 216, 216);
  float: left;
  width: 100px;
  height: 100px;
}
.user_message_div_5 {
  float: left;
  width: 380px;
  height: 30px;
  margin-left: 10px;
}
#user_message_div_6 {
  float: left;
  overflow: hidden;
  margin-top: 10px;
}
#rx {
  width: 30px;
  background-color: rgb(221, 2, 2);
  border-radius: 30px;
  color: white;
  float: left;
}
#rx_name {
  float: left;
}
#rx_num {
  float: right;
}
</style>
